import React, { useEffect, useState } from 'react'
import { Button, Drawer, Empty, message, Modal, Space, Table, Timeline } from 'antd'
import useGetTableData from '@/hooks/useGetTableData'
import { editExcelTemplate, pageExcelTemplate, uploadExcelTemplate } from '@/api/system'
import SearchForm from '@/components/CustomForm/SearchForm'
import { useForm } from 'antd/es/form/Form'
import PageContainer from '@/components/PageContainer'
import { useIndexColumns } from './columns'
import { ITableData } from './types'
import { EditFormVertical } from '@/components/CustomForm'
import { useFormEdit } from './useFormEdit'
import CustomTable from '@/components/CustomTable'
import { PlusOutlined } from '@ant-design/icons'
import { onValuesChange } from '@/utils/onValuesChange'
const Index: React.FC = () => {
  const [form] = useForm()
  const [FormEdit] = useForm()
  const [isModalShow, setIsModalShow] = useState(false)
  const [isEdit, setIsEdit] = useState(false)
  const [searchOptions, setOptions] = useState<IOptionItem[]>([])
  const [logInfos, setLogInfos] = useState([])
  const [SupplierOption, setSupplierOption] = useState<IOptionItem[]>([])
  const [isLogShow, setisLogShow] = useState(false)
  const [ispedding, setispedding] = useState<boolean>(false)
  const { tableProps, params, setParams, search, reset } = useGetTableData<ITableData>(pageExcelTemplate, {
    form: form,
  })
  useEffect(() => {}, [])
  const onConfirm = async (values: any) => {
    setispedding(true)
    const excelTemplateId = FormEdit.getFieldValue('excelTemplateId')
    let res
    if (!isEdit) {
      res = await uploadExcelTemplate(values).finally(() => setispedding(false))
    } else {
      res = await editExcelTemplate({ ...values, excelTemplateId }).finally(() => setispedding(false))
    }
    if (res.code === 200) {
      message.success('操作成功')
      onCancel()
      search(params)
    }
  }
  const onCancel = () => {
    setIsModalShow(false)
    FormEdit.resetFields()
  }
  const onEdit = (info: ITableData) => {
    FormEdit.setFieldsValue(info)
    setIsEdit(true)
    setIsModalShow(true)
  }

  return (
    <PageContainer>
      <SearchForm
        params={params}
        form={form}
        searchConfig={[
          {
            label: '模板名称',
            name: 'excelTemplateName',
            type: 'Input',
          },
        ]}
        onFinish={(vals: any) => {
          search({ ...vals })
        }}
        onReset={() => {
          reset()
        }}
        onValuesChange={(changedValues) => onValuesChange(changedValues, ['excelTemplateName'], form)}
        extra={
          <div className="table_extra_flex">
            <Button
              type="primary"
              onClick={() => {
                setIsModalShow(true)
                setIsEdit(false)
              }}
              icon={<PlusOutlined />}
            >
              新建文件模板
            </Button>
          </div>
        }
      ></SearchForm>
      <CustomTable bordered columns={useIndexColumns(onEdit)} {...tableProps} rowKey={(rows) => rows.excelTemplateId} />
      <Drawer
        title={isEdit ? '编辑文件模板' : '新建文件模板'}
        open={isModalShow}
        maskClosable
        onClose={onCancel}
        footer={
          <div className="flex_end">
            <Space>
              <Button onClick={onCancel}>取消</Button>
              <Button
                type="primary"
                onClick={() => FormEdit.validateFields().then((values) => onConfirm(values))}
                loading={ispedding}
              >
                确定
              </Button>
            </Space>
          </div>
        }
      >
        <EditFormVertical
          editConfig={useFormEdit()}
          form={FormEdit}
          onValuesChange={(changedValues) => onValuesChange(changedValues, ['excelTemplateName'], FormEdit)}
        />
      </Drawer>
    </PageContainer>
  )
}

export default Index
